import React, { useRef, useEffect, useState } from "react";
import Mymap, { mapType } from "./Mymap";
import { Select } from "antd";
import "antd/dist/antd.css";

let timeout: any;

export default () => {
  const mapRef = useRef<mapType>();
  const [searchValue, setSearchValue] = useState("");
  const [addressList, setAddressList] = useState<any>([]);

  return (
    <>
      <Mymap ref={mapRef} handleClick={(e: any) => console.log(e)} />
      <button onClick={() => mapRef.current?.initMap()}>初始化</button>
      <button
        onClick={() =>
          mapRef.current?.addPoint([{ Lat: 30.28802, Lng: 120.002059 }])
        }
      >
        添加点位
      </button>
      <Select
        showSearch
        value={searchValue}
        onChange={(e) => setSearchValue(e)}
        onSelect={(id: any) => {
          console.log("选中了", id);
        }}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={(e) => {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          timeout = setTimeout(
            () =>
              mapRef.current?.handleSearch(e, (res) => {
                setAddressList(res.data || []);
                console.log(res)
              }),
            300
          );
        }}
        style={{ width: 260, marginBottom: 12 }}
      >
        {addressList.map((item: any) => (
          <Select.Option key={item.id}>{item.title}</Select.Option>
        ))}
      </Select>
      <button
        onClick={() =>
          mapRef.current?.handleSearch(searchValue, (res: any) =>
            console.log("res", res)
          )
        }
      >
        搜索
      </button>
    </>
  );
};
